<template>
    <view class="contentbox">
        <view class="background"></view>
        <navView navTitle="专利付款申请" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>

        <view>
            <view class="list">
                <view class="title"></view>
                <view class="item">
                    <view class="span">
                        付款金额：￥{{ formData.money || '0.00' }}
                    </view>
                    <view class="ic">
                        <view class="li">
                            合同名称：{{ detail.patent.contract.name || '暂无' }}
                        </view>
                        <view class="li">
                            合同编号：{{ detail.patent.contract.num || '暂无' }}
                        </view>
                        <view class="li">
                            合同内容：{{ detail.patent.contract.content || '暂无' }}
                        </view>
                        <view class="li">
                            专利名称：{{ detail.property_name || '暂无' }}
                        </view>
                        <view class="li">
                            专利编号：{{ detail.property_number || '暂无' }}
                        </view>
                        <view class="li">
                            专利类型：{{ detail.property_type || '暂无' }}
                        </view>
                        <view class="li">
                            专利下次缴费日期：{{ detail.next_fee_payment_date || '暂无' }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="button" @click="confirmPublicPayment">
            <button>发送申请</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            detail: {},
            payMethod: 'public', // 新增付款方式状态
            formData: {
                customer_id: '',
                contract_id: '',
                money: '',
                return_cate: '',
                return_type: '',
                patent_id: '',
                property_id: '',
                remake: '用户申请专利信息缴费',
            }
        }
    },
    onLoad(option) {
        console.log(option);
        if (option.id) {
            this.id = option.id
            this.formData.money = option.amount
            this.getContractDateil()
        }
    },
    onShow() {
        this.userInfo = uni.getStorageSync('userInfo')
        this.user_status = this.userInfo.role
        console.log(this.user_status, '用户信息')
    },
    methods: {
        // 新增打款完成确认方法
        confirmPublicPayment() {
            uni.showModal({
                title: '确认提示',
                content: '请确认发送申请',
                success: (res) => {
                    if (res.confirm) {
                        this.formData.number = this.createNumber();
                        this.$request('/addons/qingdong/receivables/addReceivables', 'POST', this.formData).then(res => {
                            console.log(res)
                            if (res.code == 1) {
                                uni.showToast({
                                    title: "提交成功，等待审核",
                                    icon: 'none'
                                })
                                setTimeout(() => {
                                    uni.navigateBack()
                                }, 1200)
                            }else{
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none'
                                })
                            }
                        })
                        // 这里添加实际打款完成的后端逻辑
                        uni.showToast({ title: '打款信息已提交审核', icon: 'success' });
                    }
                }
            });
        },
        copyText(text) {
            if (!text) {
                uni.showToast({ title: '无内容可复制', icon: 'none' });
                return;
            }

            uni.setClipboardData({
                data: text,
                success: () => {
                    uni.showToast({ title: '复制成功', icon: 'success' });
                }
            });
        },
        getContractDateil() {
            this.$request('/addons/qingdong/property/getProperty', 'GET', {
                id: this.id
            }).then(res => {
                console.log(res, '获取专利详情')
                this.detail = res.data
                this.formData.customer_id = res.data.patent.contract.customer_id
                this.formData.contract_id = res.data.patent.contract.id
                this.formData.patent_id = res.data.patent.id
                this.formData.property_id = res.data.id
                this.formData.return_cate = "miniapp"
                this.formData.return_type = "微信支付"
            })
        },
        // 在提交方法中添加编号生成逻辑
        createNumber() {
            // 生成回款编号
            const date = new Date();
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const sequence = String(Math.floor(Math.random() * 90000) + 10000).padStart(5, '0');
            return `R${year}${month}${day}${sequence}`;

        }
    }
}
</script>

<style lang="scss">
.contentbox {
    padding: 20rpx;
    box-sizing: border-box;
}

.background {
    background: #f5f6f9;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.pay-method-tabs {
    display: flex;
    margin: 30rpx;
    background: #f5f6f9;
    border-radius: 16rpx;
    padding: 8rpx;

    .tab-item {
        flex: 1;
        text-align: center;
        padding: 20rpx;
        color: #666;
        border-radius: 12rpx;
        transition: all 0.3s;

        &.active {
            background: #fff;
            color: #008EFE;
            box-shadow: 0 2rpx 6rpx rgba(0, 142, 255, 0.1);
        }
    }
}

.confirm-button {
    margin-top: 40rpx;

    button {
        background: #008EFE;
        color: #fff;
        border-radius: 50rpx;
        font-size: 32rpx;
    }
}

.invoice-card {
    background: #fff;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 142, 255, 0.1);
    margin: 30rpx;
    padding: 30rpx;

    .card-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
        margin-bottom: 20rpx;
    }

    .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;

        .info-content {
            flex: 1;
            margin-right: 20rpx;

            .info-label {
                font-size: 28rpx;
                color: #666;
            }

            .info-value {
                font-size: 28rpx;
                color: #333;
                word-break: break-all;
            }
        }

        .copy-btn {
            display: flex;
            align-items: center;
            padding: 10rpx 20rpx;
            border-radius: 8rpx;
            border: 1rpx solid #008EFE;
            background: rgba(0, 142, 255, 0.05);

            .copy-text {
                color: #008EFE;
                font-size: 24rpx;
                margin-left: 8rpx;
            }

            &:active {
                opacity: 0.8;
            }
        }
    }
}

.list {
    width: 100%;

    .title {
        width: 100%;
        height: 60rpx;
        background: #ABDAFE;
        border: 20rpx solid #008EFE;
        border-radius: 50rpx;
        box-sizing: border-box;
    }

    .item {
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: -30rpx;
        background: #fff;
        border-radius: 5rpx;
        box-sizing: border-box;

        .span {
            font-weight: bold;
            font-size: 28rpx;
            color: #008EFE;
            padding: 30rpx;
            box-sizing: border-box;
            border-bottom: 1rpx solid #eaeaea;
        }

        .ic {
            padding: 30rpx;
            box-sizing: border-box;
            width: 100%;

            .li {
                padding: 10rpx 0;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
            }
        }
    }
}

.button {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    button {
        width: 100%;
        margin: 0;
        background: #008EFE;
        color: #fff;
        border: 0;
        border-radius: 50rpx;
    }
}
</style>